<template>
    <view class="bottom">
        <Header></Header>
        <view>
            <view class="home">
                <u-icon style="margin-left: 50rpx;margin-right: 20rpx"
                        name="home-fill" color="#00eaff" @click="home"></u-icon>
                <text style="color: #00eaff;padding-right: 30rpx">Recharge</text>
            </view>
            <view>
                <view class="title">
                    <view class="title-text">Please select payment method</view>
                    <view class="way">
                        <view v-for="(item,index) in wayList" :key="index" class="way-item"
                              :class="{ 'selected': wayId === item.id }" @click="wayClick(item)">
                            <u-icon :name="item.icon" size="36" :color="item.color"></u-icon>
                            {{ item.name }}
                        </view>
                    </view>
                </view>

                <view class="recharge">
                    <view v-for="(item,index) in rechargeList" :key="index" class="recharge-item"
                          :class="{ 'selected': rechargeId === item.id }" @click="rechargeClick(item)">
                        <view>
                            <i class="custom-icon custom-icon-objects-color_diamond"
                               style="padding-right: 10rpx;color: #65a5c7"></i>
                            {{ item.coin }}
<!--                            <view>赠送：{{ item.free_coin }}</view>-->
                        </view>
                    </view>
                </view>
                <view class="recharge-btn">
                    <u-checkbox-group class="recharge-btn-checkbox">
                        <u-checkbox v-model="agreement" shape="circle">
                            <view style="color: #ffffff;font-size: 24rpx">I have agreed to the User Agreement and Privacy Policy
                            </view>
                        </u-checkbox>
                    </u-checkbox-group>
                    <u-button type="primary" @click="recharge">Confirm Payment
                        {{ rmb }}$
                    </u-button>
                </view>
            </view>
        </view>
        <!-- 提示框 -->
        <u-toast ref="uToast"/>
        <custom-tabbar></custom-tabbar>
    </view>
</template>

<script>
import Header from "@/components/header/header.vue";
import CustomTabbar from "@/components/tabbar/tabbar.vue";

export default {
    name: "recharge",
    components: {
        Header,
        CustomTabbar,
    },
    data() {
        return {
            wayId: 1,
            rechargeId: 1,
            wayList: [
                {
                    id: 1,
                    name: '支付宝',
                    icon: 'zhifubao',
                    color: '#06b4fd',
                },
                // {
                //     id: 2,
                //     name: '微信',
                //     icon: 'weixin-fill',
                //     color: '#06af09',
                // },
            ],
            rechargeList: [],
            rmb: 0,
            agreement: false,
            // 支付宝
            alipay: '',
            action: 'http://118.122.224.27:65129',
        };
    },
    onShow() {
        this.getRechargeList();
    },
    methods: {
        // 返回
        home() {
            this.$u.route('pages/index/index')
        },
        // 支付方式
        wayClick(item) {
            this.wayId = item.id;
        },
        // 充值数量
        rechargeClick(item) {
            this.rechargeId = item.id;
            this.rmb = item.rmb;
        },
        // 获取充值列表
        getRechargeList() {
            this.$u.api.getRechargeList().then(res => {
                if (res.code === 1) {
                    this.rechargeList = res.data.list;
                    this.rechargeId = res.data.list[0].id;
                    this.rmb = res.data.list[0].rmb;
                }
            })
        },
        // 充值
        recharge() {
            if (!this.agreement) {
                this.$refs.uToast.show({
                    title: 'Please check the box to agree to the user agreement and privacy policy',
                    type: 'error',
                });
                return;
            }
            this.$u.api.createRechargeOrder({
                amount: this.rechargeList.find(item => item.id === this.rechargeId).coin,
                id: this.rechargeId,
            }).then(res => {
                if (res.code === 1) {
                    window.open(res.data);
                } else {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'error',
                        position: 'top',
                    });
                }

            })
        }
    },
}
</script>

<style lang="scss" scoped>
.home {
    line-height: 100rpx;
    //margin-left: 30rpx;
    color: white;
    font-size: 34rpx;
    background-image: url("@/static/images/header-bg.png");
    background-size: cover;
    height: 100rpx;
}

.title {
    background-color: #1a1f30;
    border-radius: 10rpx;

    .title-text {
        padding-top: 20rpx;
        margin: 30rpx;
        font-size: 30rpx;
    }

    .way {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        text-align: center;
        padding-bottom: 20rpx;


        .way-item {
            height: 100rpx;
            width: 200rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 10rpx;
        }
    }
}

.selected {
    border: 2px solid #ff31ed;
}

.recharge {
    padding-top: 20rpx;
    margin-top: 30rpx;
    background-color: #1a1f30;
    border-radius: 10rpx;
    flex-wrap: wrap;

    display: flex;
    flex-direction: row;
    text-align: center;
    padding-bottom: 20rpx;

    .recharge-item {

        height: 100rpx;
        width: calc(33.33% - 30rpx);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 15rpx;
    }
}

.recharge-btn {
    margin-top: 30rpx;
    background-color: #1a1f30;
    border-radius: 10rpx;
    padding: 20rpx 30rpx;

    .recharge-btn-checkbox {
        margin-bottom: 20rpx;
    }

}

::v-deep .u-type-success {
    background-color: #0f0e2d;
    border: none;
}

::v-deep .u-type-error {
    background-color: #0f0e2d;
    border: none;
}
</style>
